<script setup lang="ts">

import MyRow from "@/components/MyRow.vue";
import MyList from "@/components/MyList.vue";
import {useAssetTypeApi} from "@/apis/AssetTypeApi";
import AssetTypeSaveView from "@/views/asset/AssetTypeSaveView.vue";
import {ref} from "vue";
import MyTableColumn from "@/components/MyTableColumn.vue";
import router from "@/router";

const assetTypeApi = useAssetTypeApi()

let showSave = ref(false)
let assetTypeList = ref([])
let editAssetType = ref({})
let page = ref({
  total: 0,
  pageSize: 10,
  page: 1
})

loadData(page.value.page, page.value.pageSize)
function loadData(pageNo:number, pageSize: number){
  assetTypeApi.list({
    page: pageNo,
    pageSize: pageSize
  }).then((res:any) => {
    assetTypeList.value = res.records
    page.value.total = res.total
    page.value.page = res.page
    page.value.pageSize = res.pageSize
  })
}
const onEdit = (row:any) => {
  showSave.value = true
  editAssetType.value = row
}
const onSave = () =>{
  showSave.value = false
  loadData(page.value.page, page.value.pageSize)
}
const onAdd = () =>{
  showSave.value = true
  editAssetType.value = {}
}
const pageChange = (pageNo:number, pageSize:number) => {
  loadData(pageNo, pageSize)
}
const onShowData = (row:any) => {
  router.push({
    name: "assetList",
    query:{
      aid: row.id,
      tagName: row.typeName
    }
  })
}
</script>

<template>
  <my-row>
    <el-button type="primary" @click="loadData(page.page, page.pageSize)">搜索</el-button>
  </my-row>
  <my-row>
    <el-button type="primary" plain size="small" @click="onAdd">新增资产类型</el-button>
  </my-row>
  <my-list :data="assetTypeList" :page="page" @page-change="pageChange">
    <el-table-column label="编号" prop="id" width="70"></el-table-column>
    <el-table-column label="类型名称" prop="typeName"></el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" type="primary" plain @click="onEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="primary" plain @click="onShowData(scope.row)">查看数据</el-button>
      </template>
    </el-table-column>
  </my-list>
  <asset-type-save-view v-model="showSave" :data="editAssetType" @save="onSave"/>
</template>

<style scoped>

</style>